
.field-box {  
  overflow: hidden;
  display:inline-flex;
  margin-right: 5px;
  align-items: center;
  cursor: pointer;   
  .field-avater {  
    background-color: #ff9f73;
  }

  .field-info { 
    align-items: center;
    display:inline-flex; 
  }
  .field-oper {  
    margin-right: 5px; 
    display: none;
  }
}


.field-box-x {
  margin:auto;
  display:inline-flex;
  align-content: flex-start; 
  align-items: center;
  justify-items: center;
  margin-right: 5px;
  align-items: center;
  cursor: pointer; 
  .field-avater {  
    background-color: #ff9f73;
  }

  .field-info {  
    display:inline-flex;
    align-items: center;
    align-content: center;
    .field-value { 
      margin:auto;
      font-size: 0.75rem;
    }
    .field-label { 
      margin:auto;
      font-size: 0.75rem;
      color: #c0c4cc;
    }
  }
  .field-oper {  
    margin-right: 5px; 
    display: none;
  }
}
.field-box:hover .field-info.enabled{ 
  border-style: dashed;
  border-width: 0.1em;
  border-color:rgb(34, 0, 255);
  background-color: rgba(255,255,255,0.5);


}
.field-box-x:hover .field-info.enabled { 
  border-style: dashed;
  border-width: 0.1em;
  border-color:rgb(34, 0, 255);
  background-color: rgba(255,255,255,0.5);

}
.field-box:hover .field-avater.enabled {
  display: none;
}
.field-box:hover .field-info.enabled {
  display: none;
}
.field-box:hover .field-info.enabled.hidden {
  display: none;
}
.field-box:hover .field-info.enabled.nohidden {
  display: inline;
}
.field-box:hover .field-oper.enabled {
  display: inline;
}
.field-box-x:hover .field-info.enabled {
  display: none;
}
.field-box-x:hover .field-info.enabled.hidden {
  display: none;
}
.field-box-x:hover .field-info.enabled.nohidden {
  display: inline;
}
.field-box-x:hover .field-oper.enabled {
  display: inline;
}

.dashed-circle { 
  border: 2px dashed #000000; 
}
.field-box:hover .dashed-circle {
  border: 2px dashed #409eff;
}


.avatar-container {
  height: 40px;
  display: flex;
  align-items: center;
  .avatar-wrapper {
      cursor: pointer;
      display: flex;
      flex-direction: row;
      align-items: center;
      .user-avatar {
          height: 36px;
          width: 36px;
          border-radius: 50%;
          margin-right: 12px;
      }
      .username{
          color: #7D7D7D;
          font-size: 0.75rem; 
      }
      .el-icon-caret-bottom {
          font-size: 22px;
      }
  }
}